<!doctype html>
<head>
<meta charset=utf-8>
<title>Test Mozilla-specific discrete animatable properties</title>
<script type="application/javascript" src="../testcommon.js"></script>
</head>
<body>
<script>
"use strict";

const gMozillaSpecificProperties = {
  "-moz-appearance": {
    // https://drafts.csswg.org/css-align/#propdef-align-content
    from: "button",
    to: "none"
  },
  "-moz-border-bottom-colors": {
    from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
    to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
  },
  "-moz-border-left-colors": {
    from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
    to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
  },
  "-moz-border-right-colors": {
    from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
    to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
  },
  "-moz-border-top-colors": {
    from: "rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0) rgb(255, 0, 0)",
    to: "rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0) rgb(0, 255, 0)"
  },
  "-moz-box-align": {
    // https://developer.mozilla.org/en/docs/Web/CSS/box-align
    from: "center",
    to: "stretch"
  },
  "-moz-box-direction": {
    // https://developer.mozilla.org/en/docs/Web/CSS/box-direction
    from: "reverse",
    to: "normal"
  },
  "-moz-box-ordinal-group": {
    // https://developer.mozilla.org/en/docs/Web/CSS/box-ordinal-group
    from: "1",
    to: "5"
  },
  "-moz-box-orient": {
    // https://www.w3.org/TR/css-flexbox-1/
    from: "horizontal",
    to: "vertical"
  },
  "-moz-box-pack": {
    // https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#propdef-box-pack
    from: "center",
    to: "end"
  },
  "-moz-float-edge": {
    // https://developer.mozilla.org/en/docs/Web/CSS/-moz-float-edge
    from: "margin-box",
    to: "content-box"
  },
  "-moz-force-broken-image-icon": {
    // https://developer.mozilla.org/en/docs/Web/CSS/-moz-force-broken-image-icon
    from: "1",
    to: "5"
  },
  "image-rendering": {
    // https://drafts.csswg.org/css-images-3/#propdef-image-rendering
    from: "-moz-crisp-edges",
    to: "auto"
  },
  "-moz-stack-sizing": {
    // https://developer.mozilla.org/en/docs/Web/CSS/-moz-stack-sizing
    from: "ignore",
    to: "stretch-to-fit"
  },
  "-moz-text-size-adjust": {
    // https://drafts.csswg.org/css-size-adjust/#propdef-text-size-adjust
    from: "none",
    to: "auto"
  },
  "-webkit-text-stroke-width": {
    // https://compat.spec.whatwg.org/#propdef--webkit-text-stroke-width
    from: "10px",
    to: "50px"
  }
}

for (let property in gMozillaSpecificProperties) {
  const testData = gMozillaSpecificProperties[property];
  const from = testData.from;
  const to = testData.to;
  const idlName = propertyToIDL(property);
  const keyframes = {};
  keyframes[idlName] = [from, to];

  test(t => {
    const div = addDiv(t);
    const animation = div.animate(keyframes,
                                  { duration: 1000, fill: "both" });
    testAnimationSamples(animation, idlName,
                         [{ time: 0,    expected: from.toLowerCase() },
                          { time: 499,  expected: from.toLowerCase() },
                          { time: 500,  expected: to.toLowerCase() },
                          { time: 1000, expected: to.toLowerCase() }]);
  }, property + " should animate between '"
   + from + "' and '" + to + "' with linear easing");

  test(function(t) {
    // Easing: http://cubic-bezier.com/#.68,0,1,.01
    // With this curve, we don't reach the 50% point until about 95% of
    // the time has expired.
    const div = addDiv(t);
    const animation = div.animate(keyframes,
                                  { duration: 1000, fill: "both",
                                    easing: "cubic-bezier(0.68,0,1,0.01)" });
    testAnimationSamples(animation, idlName,
                         [{ time: 0,    expected: from.toLowerCase() },
                          { time: 940,  expected: from.toLowerCase() },
                          { time: 960,  expected: to.toLowerCase() }]);
  }, property + " should animate between '"
   + from + "' and '" + to + "' with effect easing");

  test(function(t) {
    // Easing: http://cubic-bezier.com/#.68,0,1,.01
    // With this curve, we don't reach the 50% point until about 95% of
    // the time has expired.
    keyframes.easing = "cubic-bezier(0.68,0,1,0.01)";
    const div = addDiv(t);
    const animation = div.animate(keyframes,
                                  { duration: 1000, fill: "both" });
    testAnimationSamples(animation, idlName,
                         [{ time: 0,    expected: from.toLowerCase() },
                          { time: 940,  expected: from.toLowerCase() },
                          { time: 960,  expected: to.toLowerCase() }]);
  }, property + " should animate between '"
   + from + "' and '" + to + "' with keyframe easing");
}

function propertyToIDL(property) {
  var prefixMatch = property.match(/^-(\w+)-/);
  if (prefixMatch) {
    var prefix = prefixMatch[1] === "moz" ? "Moz" : prefixMatch[1];
    property = prefix + property.substring(prefixMatch[0].length - 1);
  }
  // https://drafts.csswg.org/cssom/#css-property-to-idl-attribute
  return property.replace(/-([a-z])/gi, function(str, group) {
    return group.toUpperCase();
  });
}

function testAnimationSamples(animation, idlName, testSamples) {
  const target = animation.effect.target;
  testSamples.forEach(testSample => {
    animation.currentTime = testSample.time;
    assert_equals(getComputedStyle(target)[idlName], testSample.expected,
                  "The value should be " + testSample.expected +
                  " at " + testSample.time + "ms");
  });
}

done();
</script>
</body>
